<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表达式追踪列表</title>
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
    <script src="//unpkg.com/layui@2.9.14/dist/layui.js"></script>
    <script src="/js/Utils.js"></script>
    <script src="/js/engine-const.js"></script>
</head>
<body>
<form class="layui-form">
    <div class="layui-form-item layui-col-space16">
        <div class="layui-col-md3">
            <label class="layui-form-label">执行器编号</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="executorId" value=""/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">项目名称</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="serviceName" value=""/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">业务组</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="businessCode" value=""/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">业务编码</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="executorCode" value=""/>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-col-space16">
        <div class="layui-col-md3">
            <label class="layui-form-label">事件名称</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="eventName" value=""/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">用户编号</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="userId" value=""/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">业务编号</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="unionId" value=""/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">追踪编号</label>
            <div class="layui-input-block">
                <input class="layui-input" code="text" name="traceId" value=""/>
            </div>
        </div>
    </div>
    <div class="layui-btn-container layui-col-xs12">
        <button class="layui-btn" lay-filter="executor-table-search" lay-submit>Search</button>
        <button class="layui-btn layui-btn-primary" type="reset">Clear</button>
    </div>
</form>
<table class="layui-hide" id="ID-table-executor-search"></table>

</body>
<script id="id-operation-bar" type="text/html">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="btn-config-rule">查看追踪信息</a>
    </div>
</script>
<!--<script type="text/html" id="executor-toolbar">-->
<!--    <div class="layui-btn-container">-->
<!--        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="openAddHtml">新增</button>-->
<!--    </div>-->
<!--</script>-->
<script type="text/javascript">
    var table = layui.table;
    var $ = layui.$;
    var form = layui.form;
    var util = layui.util
    var laydate = layui.laydate;

    let api_list = final_const.api_path.trace_list;
    let expression_rule_config = final_const.template_path.expression_rule_config;

    // 创建表格实例
    table.render({
        elem: '#ID-table-executor-search',
        toolbar: '#executor-toolbar',
        url: api_list, // 此处为静态模拟数据，实际使用时需换成真实接口
        method: 'post',
        maxHeight: 1000,
        title: '表达式追踪日志列表',
        contentType: 'application/json',
        cols: [[
            {field: 'id', title: '主键', width: 50, hide: true}, // 单选框
            {field: 'executor_id', title: '执行器编号', width: 50, hide: true}, // 单选框
            {field: 'serviceName', title: '所属服务', sort: true},
            {field: 'businessCode', title: '业务组', sort: true},
            {field: 'executorCode', title: '业务编码'},
            {field: 'executorName', title: '执行器名称'},
            {field: 'eventName', title: '事件名称'},
            {field: 'userId', title: '用户编号'},
            {field: 'unionId', title: '业务编号'},
            {field: 'traceId', title: '追踪编号'},
            {field: 'envBody', title: '请求参数'},
            {
                field: 'created', title: '创建时间', sort: true, templet: function (d) {
                    return util.toDateString(d.created, 'yyyy-MM-dd HH:mm:ss');
                }
            },
            {fixed: 'right', title: '操作', width: 154, minWidth: 125, toolbar: '#id-operation-bar'}
        ]],
        request: {
            pageName: 'pageNum', // 页码的参数名称，默认：page
            limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
        },
        parseData: function (res) { // res 即为原始返回的数据
            return {
                "code": res.code === 200 ? 0 : res.code, // 解析接口状态
                "msg": res.message, // 解析提示文本
                "count": res.data.total, // 解析数据长度
                "data": res.data.records // 解析数据列表
            };
        },
        page: true
    });
    // 日期
    laydate.render({
        elem: '.demo-table-search-date'
    });
    // 搜索提交
    form.on('submit(executor-table-search)', function (data) {
        var field = data.field; // 获得表单字段
        // 执行搜索重载
        table.reload('ID-table-executor-search', {
            page: {
                pageNum: 1, // 重新从第 1 页开始
                // pageSize: 10 // 重新从第 1 页开始
            },
            where: field // 搜索的字段
        });
        //layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
        return false; // 阻止默认 form 跳转
    });

    // 触发单元格工具事件
    table.on('tool(ID-table-executor-search)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        if (obj.event === 'btn-edit') {
            open_form(obj.data.id);
        } else if (obj.event === 'btn-config-rule') {
            util.openWin({
                url: expression_rule_config + '?traceLogId=' + data.id + '&&executorId=' + data.executorId + "&&executorCode=" + data.executorCode + "&&executorDescription=" + data.executorName
            });
        }
    });

    function reloadTable() {
        table.reload('ID-table-executor-search', {
            page: {
                curr: 1 // 重新从第 1 页开始
            }
        });
    }
</script>

</html>
